<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style type="text/css">
		.pagenation{
			width: 958px;
			height: 40px;
			border: 1px solid #000;
			margin: 50px auto 0;
			font-size: 0;
			text-align: center;
		}
		.pagenation a{
			display: inline-block;
			padding: 5px 10px;
			background-color: gold;
			font-size: 12px;
			text-decoration: none;
			margin: 9px 5px;
		}
		
		.pagenation a:hover{
			background-color: red;
			color: #fff;
		}
		

		.pagenation span{
			display: inline-block;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div class="pagenation">
		<a href="">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">4</a>
		<span>...</span>
		<a href="">17</a>
		<a href="">18</a>
		<a href="">19</a>
		<a href="">20</a>
		<a href="">下一页</a>
	</div>
</body>
</html>